<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-23 16:15:28
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <el-container>
      <el-header>
        <Head/>
      </el-header>

      <el-main class="tbody">
          <aside class="nav">
            <el-card >
              <h3>会员中心</h3>
              <el-menu class="el-menu-vertical-demo" default-active="1" :router="true">
                <el-menu-item :route="menu.path" :index="menu.id" v-for="(menu,index) in menuData"  :key="index" >
                  <template slot="title" >
                    <span>{{menu.title}}</span>
                  </template>
                </el-menu-item>
               
                
              </el-menu>
            </el-card>
          </aside>
        <main class="main">
          <router-view />
        </main>
      </el-main>

      <el-footer>
        <Foot/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Head from "@/views/layout/Head.vue"
import Foot from "@/views/layout/Foot.vue"

export default {
  components: {
        Head,
        Foot
    },
    data(){
      return{
        menuData:[
          {
            id:"1",
            title:"个人中心",
            path:"/memberCenter"
          },
          {
            id:"2",
            title:"我的订单",
            path:"/order"
          },
          // {
          //   id:"3",
          //   title:"我的收藏",
          //   path:"/memberCenter"
          // },
          {
            id:"4",
            title:"地址管理",
            path:"/address"
          },
          {
            id:"5",
            title:"安全中心",
            path:"/security"
          },
          {
            id:"6",
            title:"个人信息",
            path:"/info"
          },
        ]

      }
    },
    mounted(){},
    methods:{}
}
</script>

<style lang="scss" scoped>

.el-header{
    background-color: #fff;
    color: #333;
    text-align: center;
    /* line-height: 100px; */
  }
  .el-main {
    margin: 0;
    padding: 0;
    background-color: rgb(240, 240, 240);
    color: #333;
    text-align: center;
    display: flex;
  }
  .el-main::-webkit-scrollbar{
    display: none;
  }
  .el-footer {
    background-color: rgb(173, 163, 163);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .nav{
    width:10%;
    margin-left: 7%;
    margin-top: 2%;
    
  }
  .main{
    margin-right: 7%;
    margin-top: 2%;
    margin-left: 1%;
    width: 80%;
  }
  .avatar{
    line-height: 60px;
  }
</style>